<template>
    <div class="ach-list-wrap display-flex flex-column">
      <div class="panel panel-form">
        <el-form :inline="true" class="filter-form">
          <div class="form-content">
            <el-form-item label="名称">
              <el-input v-model="queryParams.title" clearable placeholder="请输入实例、数据库名称等" />
            </el-form-item>
            <el-form-item label="用户">
              <el-input v-model="queryParams.user" clearable placeholder="请输入操作用户" />
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
                <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
              </el-select>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                v-model="queryParams.start_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
              />
              <el-date-picker
                v-model="queryParams.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
              />
            </el-form-item>
          </div>
          <div>
            <el-button @click="resetFilterForm()">重置</el-button>
            <el-button type="primary" @click="getList(1)">查询</el-button>
          </div>
        </el-form>
      </div>
      <div class="panel flex flex-column table-container" style="padding-bottom: 0">
        <el-table v-loading="loading" :border="true" :data="tableData"  height="100%" :header-cell-style="{background:'#D8E8FF'}">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="time" label="操作时间" width="200" align="center" />
          <el-table-column prop="user" label="操作用户" width="100" align="center" />
          <el-table-column prop="info" label="操作实例" width="120" align="center" />
          <el-table-column prop="database" label="数据库" width="200" align="center" />
          <el-table-column prop="sql_type" label="SQL类型" width="130" align="center" />
          <el-table-column prop="sql" label="SQL" align="center" min-width="200" />
          <el-table-column prop="status" label="状态" min-width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==='成功'" type="success" size="small">{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="行数" width="100" align="center" />
          <el-table-column prop="consume" label="耗时（ms）" width="100" align="center" />
          <el-table-column prop="remark" label="备注" width="120" align="center" />
        </el-table>
        <div class="pagination-container">
          <pagination-control
            :paging-params="pagingParams"
            @onCurrentPage="handleCurrentChange"
            @onCurrentSize="handleSizeChange"
          />
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
  import {get, post} from "@/utils/http"
  import PaginationControl from "@/layout/paginationControl.vue"
  
  export default {
    components: {
      PaginationControl,
    },
    data: function() {
      return {
        avatar: '',
        tableData: [
            {
                "time": "2024-10-20 15:53:32",
                "user": "root",
                "info": "创建数据库",
                "database": "mysql",
                "sql_type": "DDL",
                "sql": "CREATE DATABASE school;",
                "status": "成功",
                "number": "0",
                "consume": "12",
                "remark": ""
            },
            {
                "time": "2024-10-20 15:53:52",
                "user": "root",
                "info": "删除数据库",
                "database": "mysql",
                "sql_type": "DDL",
                "sql": "DROP DATABASE school;",
                "status": "成功",
                "number": "0",
                "consume": "3",
                "remark": ""
            },
            {
                "time": "2024-10-20 15:58:32",
                "user": "root",
                "info": "创建表",
                "database": "mysql",
                "sql_type": "DDL",
                "sql": "CREATE TABLE students (id INT PRIMARY KEY, name VARCHAR(100), age INT);",
                "status": "成功",
                "number": "0",
                "consume": "7",
                "remark": ""
            },
            {
                "time": "2024-10-20 16:53:32",
                "user": "root",
                "info": "删除表",
                "database": "mysql",
                "sql_type": "DDL",
                "sql": "DROP TABLE users;",
                "status": "成功",
                "number": "8",
                "consume": "12",
                "remark": ""
            },
            {
                "time": "2024-10-20 19:53:32",
                "user": "root",
                "info": "插入数据",
                "database": "mysql",
                "sql_type": "DML",
                "sql": "INSERT INTO students (id, name, age) VALUES (1, 'Alice', 20);",
                "status": "成功",
                "number": "1",
                "consume": "3",
                "remark": ""
            },
            {
                "time": "2024-10-21 15:53:32",
                "user": "root",
                "info": "更新数据",
                "database": "mysql",
                "sql_type": "DML",
                "sql": "UPDATE students SET age = 21 WHERE id = 1;",
                "status": "成功",
                "number": "1",
                "consume": "4",
                "remark": ""
            },
            {
                "time": "2024-10-22 15:53:32",
                "user": "root",
                "info": "删除数据",
                "database": "mysql",
                "sql_type": "DML",
                "sql": "DELETE FROM students WHERE id = 1;",
                "status": "成功",
                "number": "1",
                "consume": "6",
                "remark": ""
            },
            {
                "time": "2024-10-21 16:53:32",
                "user": "root",
                "info": "查询所有数据",
                "database": "mysql",
                "sql_type": "DQL",
                "sql": "SELECT * FROM students;",
                "status": "成功",
                "number": "12",
                "consume": "3",
                "remark": ""
            },
            {
                "time": "2024-10-21 16:53:52",
                "user": "root",
                "info": "条件查询",
                "database": "mysql",
                "sql_type": "DQL",
                "sql": "SELECT * FROM students WHERE age > 18;",
                "status": "成功",
                "number": "4",
                "consume": "2",
                "remark": ""
            },
            {
                "time": "2024-10-21 17:58:32",
                "user": "root",
                "info": "使用聚合函数",
                "database": "mysql",
                "sql_type": "DQL",
                "sql": "SELECT COUNT(*) FROM students;",
                "status": "成功",
                "number": "1",
                "consume": "5",
                "remark": ""
            },
            {
                "time": "2024-10-21 15:58:59",
                "user": "root",
                "info": "分组查询",
                "database": "mysql",
                "sql_type": "DQL",
                "sql": "SELECT age, COUNT(*) FROM students GROUP BY age;",
                "status": "成功",
                "number": "1",
                "consume": "7",
                "remark": ""
            },
            {
                "time": "2024-10-22 9:53:32",
                "user": "root",
                "info": "排序结果",
                "database": "mysql",
                "sql_type": "DQL",
                "sql": "SELECT * FROM students ORDER BY age DESC;",
                "status": "成功",
                "number": "10",
                "consume": "5",
                "remark": ""
            },
            {
                "time": "2024-10-22 10:53:32",
                "user": "root",
                "info": "创建索引",
                "database": "mysql",
                "sql_type": "DDL",
                "sql": "CREATE INDEX idx_age ON students (age);",
                "status": "成功",
                "number": "0",
                "consume": "9",
                "remark": ""
            },
            {
                "time": "2024-10-22 11:53:32",
                "user": "root",
                "info": "删除索引",
                "database": "mysql",
                "sql_type": "DDL",
                "sql": "DROP INDEX idx_age ON students;",
                "status": "成功",
                "number": "0",
                "consume": "6",
                "remark": ""
            }
        ],
        queryParams: {
          user: '',
          title: '',
          type: '',
          start_time: '',
          end_time: ''
        },
        pagingParams: {
          page: 1,
          size: 20,
          total: 0
        },
        loading: false,
        typeList: {
          10: "科研项目",
          20: "发表论文",
          30: "发明专利",
          40: "专著与教材",
          50: "奖励",
          60: "代表性研究成果",
        },
      };
    },
    watch: {
    },
    created() {
      this.getList();
    },
    methods: {
      resetFilterForm() {
        for (const key in this.queryParams) {
          this.queryParams[key] = '';
        }
        this.getList(1);
      },
      getList(isReset) {
        // if (isReset) {
        //   this.pagingParams.page = 1;
        // }
        // const params = {
        //   page: this.pagingParams.page,
        //   size: this.pagingParams.size,
        //   is_all: 0,
        //   title: this.queryParams.title,
        //   type: this.queryParams.type,
        //   start_time: this.queryParams.start_time,
        //   end_time: this.queryParams.end_time
        // }
        // get("/achievement/manage/list", params)
        // .then(res=>{
        //   this.tableData = res.data.data.list;
        //   this.pagingParams.total = res.data.data.count;
        //   console.log(this.tableData);
        // })
        
        this.pagingParams.total = 14;
      },
      handleCurrentChange(val) {
        this.pagingParams.page = val;
        this.getList();
      },
      handleSizeChange(val) {
        this.pagingParams.size = val;
        this.getList(1);
      },
    }
  };
  </script>
  
  <style src="@wangeditor/editor/dist/css/style.css"></style>
  <style lang="less" scoped>
  .ach-list-wrap {
    height: 100%;
    width: 100%;
    position: relative;
      .status {
          color: #c0ccda;
          margin-right: 8px;
          &.active {
              color: #13ce66;
          }
      }
    .manager {
          color: #c0ccda;
          margin-right: 8px;
          &.active {
              color: #13ce66;
          }
      }
    .table-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 90px;
      bottom: 0;
      .el-table {
        font-size: 12px !important;
      }
    }
      .panel {
          box-shadow: 0 0 5px #ebe7e7;
          background-color: #fff;
          padding: 20px;
          overflow: hidden;
      display: flex;
      flex-direction: column;
          .table-btns {
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
          }
      }
      .filter-form {
          display: flex;
          align-items: center;
          .form-content {
              flex: 1;
              margin-right: 20px;
              margin-top: -6px;
              margin-bottom: -6px;
          }
      }
      ::v-deep {
          .filter-form {
              .el-form-item {
                  margin-bottom: 0;
                  padding-top: 6px;
                  padding-bottom: 6px;
              }
              .el-form-item__label {
                  font-size: 12px;
                  font-weight: normal;
              }
        .el-input--suffix .el-input__inner {
          height: 32px;
        }
          }
      .el-dialog__wrapper {
        display: flex;
        align-items: center;
        height: 100%;
      }
      .el-dialog{
        max-width: 95%;
        max-width: 88%;
        max-height: 88%;
        display: flex;
        flex-direction: column;
        margin-top: 0 !important;
        .el-dialog__body {
          flex: 1;
          overflow-y: auto;
          padding: 20px;
        }
        .el-form-item {
          margin-bottom: 10px;
          .el-form-item__content{
            .el-select{
              width: 100%;
            }
          }
          .el-form-item__label {
            font-weight: 700;
          }
          .el-textarea__inner {
            font-family: "微软雅黑";
          }
          .el-textarea .el-input__count {
            line-height: 16px !important;
          }
        }
      }
      }
  }
  .el-button{
    border-radius: 16px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
      color: #409EFF;
      background: #E9F2FF;
      border: 1px solid #C4E1FF;
    }
    &.el-button--danger.is-plain{
      color: #FF9D9D;
      background: #FDEEEE;
      border: 1px solid #FFD4D4;
    }
  }
  //表格内容颜色
  ::v-deep .el-table__body tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
  }
  ::v-deep .el-table__body tbody tr:nth-child(even) td {
    background-color: #F1F8FF;
  }
  //表头文字样式
  ::v-deep .el-table__header-wrapper {
    thead {
      th{
        div{
          // font-weight: 700;
          // font-size: 20px;
          color: #333333
        }
      }
    }
  }
  .dialog-content {
    // ::v-deep .upload-img div .el-upload--picture-card {
    //   height: 150px;
    //   width: 300px;
    // }
    ::v-deep .upload-img .disable .el-upload--picture-card {display: none !important;}
    ::v-deep .upload-img .disable .el-upload--picture-card .el-upload-list__item-thumbnail {object-fit: cover !important;}
    // ::v-deep .upload-img .disable .el-upload--picture-card .el-upload-list__item {width: 300px !important; }
  }
  ::v-deep .w-e-textarea-divider {
    margin: 0 !important;
    padding: 0 !important;
  }
  ::v-deep .w-e-text-container [data-slate-editor] p  {
    margin: 0 !important;
  }
  ::v-deep .w-e-text-container [data-slate-editor] h1, .w-e-text-container [data-slate-editor] h2, .w-e-text-container [data-slate-editor] h3, .w-e-text-container [data-slate-editor] h4, .w-e-text-container [data-slate-editor] h5 {
      margin: 0 !important;
  }
  ::v-deep [data-v-7106d285] .w-e-text-container [data-slate-editor] h1, .w-e-text-container [data-slate-editor] h2[data-v-7106d285], .w-e-text-container [data-slate-editor] h3[data-v-7106d285], .w-e-text-container [data-slate-editor] h4[data-v-7106d285], .w-e-text-container [data-slate-editor] h5[data-v-7106d285] {
      margin: 0 !important;
  }
    ::v-deep .w-e-text-container {
      margin: 0 !important;
    }
  ::v-deep .el-textarea .el-input__count {
    line-height: 16px !important;
  }
  .hide .el-upload--picture-card { display: none !important; }
  </style>
  